<template>
  <div>
    <h2>条件判断指令</h2>
    <!-- vue提供了两个条件判断指令,分别是v-show和v-if -->

    <!-- 相同点:都能够控制元素的显示和隐藏 -->
    <!-- 不同点:当条件为false的时候,v-show是通过display:none来让元素隐藏,v-if直接把元素移除了,从而让元素隐藏 -->

    <!-- 如果一个元素,经常切换它的显示隐藏状态,用v-show更好 -->
    <!-- 如果起始条件是false,v-show也会创建元素,创建后让元素diaplay:none,所以v-show有更高的初始渲染代价 -->

    <!-- v-if 还可以和 v-else-if  和 v-else 配合使用，进行多条件判断  -->
    <p v-show="flag">通过v-show控制</p>
    <p v-if="flag">通过v-if控制</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
    };
  },
};
</script>

<style>
</style>